<template>
  <div class="cont-wrapper nva_menu_container">
    <div class="menu_container wst">
      <contSidebar ref="contSideBar" name="准考证管理" :activeItem="activeItem" :siderList="list" @handleAcitve="handleAcitve"></contSidebar>
    </div>
    <div class="block-container container">
      <div class="title">准考证管理</div>
      <div class="filter-box">
        <el-form :inline="true">
          <el-form-item label="姓名：">
            <el-input v-model="filter.name"></el-input>
          </el-form-item>
          <el-form-item label="学校:">
            <!-- <el-input v-model="filter.className"></el-input> -->
            <el-select class="mx-select" filterable v-model="filter.schoolId" placeholder="请选择">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="准考证号:">
            <el-input v-model="filter.ticketCard"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="c-btn va-top" type="primary" @click="handleFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="operation">
        <el-button type="primary" :disabled="tableData.length == 0 ? true : false" class="c-btn" :loading="downloading" @click="printTicket">打印准考证</el-button>
      </div>
      <div class="exam-info">
        <p>
          <span>考点：{{ pointName ? pointName : '-' }}</span>
          <span>总计：{{ pointStudentNum ? pointStudentNum + '人' : '-' }}</span>
        </p>
      </div>
      <div class="table-wrapper">
        <el-table :data="tableData" border class="c-table" style="width: 100%" v-loading="loading">
          <el-table-column label="#" width="70">
            <template slot-scope="scope">
              {{ (listQuery.page - 1) * listQuery.pageSize  + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="考生姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="stuCode" label="准考证号"></el-table-column>
          <el-table-column prop="roomName" label="考场号"></el-table-column>
          <el-table-column label="候考时间">
            <template slot-scope="scope">
              <span v-if="scope.row.examDate">
                {{ scope.row.examDate }} <br/>
                {{ `${scope.row.waitBeginTime} - ${scope.row.waitEndTime}` }}
              </span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="考试时间">
            <template slot-scope="scope">
              <span v-if="scope.row.examDate">
                {{ scope.row.examDate }} <br/>
                {{ `${scope.row.examBeginTime} - ${scope.row.examEndTime}` }}
              </span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="批次">
            <template slot-scope="scope">
              {{ scope.row && scope.row.batch ? `第 ${scope.row.batch} 批` : '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="seatCode" label="座位号"></el-table-column>
          <el-table-column prop="name" label="操作">
            <template slot-scope="scope">
              <span class="btn-txt" @click="previewTicketCard(scope.row)">查看准考证</span>
              <!-- <i class="el-icon-more" @click.stop="showIdex = scope.$index"></i>
              <div class="show-video" v-show="showIdex == scope.$index">
                <ul>
                  <li @click="previewTicketCardVisible = true">查看准考证</li>
                  <li>删除该考生</li>
                  <li>打印准考证</li>
                </ul>
              </div> -->
            </template>
          </el-table-column>
        </el-table>
        <kw-pagination v-if="tableData.length" :listQuery="listQuery" @changeCurrentPage="changeCurrentPage"></kw-pagination>
      </div>
    </div>
    <el-dialog title="查看准考证" :visible.sync="previewTicketCardVisible" width="560px">
      <div class="card-container" v-if="ticketCardInfo">
        <div class="card-title clearfix">
          <div class="info">
            <p>{{ ticketCardInfo.examDate.substring(0, 4) }}年宁波市初中学业水平考试</p>
            <p>科学实验操作考试</p>
            <h3>准<span> 考</span>证</h3>
            <div class="info-content">
              <span>姓名：{{ ticketCardInfo.name }}</span>
              <span>准考证号：{{ ticketCardInfo.stuCode }}</span>
              <span>性别：{{ ticketCardInfo.sex }}</span>
              <span>毕业学校：{{ ticketCardInfo.schoolName }}</span>
            </div>
          </div>
          <div class="photo">
            <!-- <img src="../../assets/img/city/1.png" alt=""> -->
            <div class="img" :style="{backgroundImage: 'url('+ticketCardInfo.photo+')'}"></div>
          </div>
        </div>
        <div class="card-content">
          <span>考点学校：{{ ticketCardInfo.pointName }}</span>
          <span>考场编号：{{ ticketCardInfo.roomName }}</span><br/>
          <span>考试日期：{{ formatDate(ticketCardInfo.examDate) }}</span>
          <span>座位号：{{ ticketCardInfo.seatCode }} <span style="margin-left:16px">批次：第{{ ticketCardInfo.batch }}批</span></span>
          <span>候考时间：{{ `${ticketCardInfo.waitBeginTime} - ${ticketCardInfo.waitEndTime}` }}</span>
          <span>考试时间：{{ `${ticketCardInfo.examBeginTime} - ${ticketCardInfo.examEndTime}` }}</span>
        </div>
      </div>
    </el-dialog>
    <div class="download-paper clearfix" id="downloadPaper" style="display: none;">
      <div class="dp-box" v-for="(item, idx) in userList" :key="idx">
        <div class="dp-top">
          <div class="top-left">
            <p class="title">
              {{ item.examDate.substring(0, 4) }}年宁波市初中学业水平考试<br/>
              科学实验操作考试
            </p>
            <p class="title-card">准&nbsp;&nbsp;&nbsp;&nbsp;考&nbsp;&nbsp;&nbsp;&nbsp;证</p>
            <div class="clearfix">
              <div class="tl-block tl-info">
                <p>姓名：{{ item.name }}</p>
                <p>性别：{{ item.sex }}</p>
              </div>
              <div class="tl-block">
                <p>准考证号：{{ item.stuCode }}</p>
                <p class="graduation-school">
                  <span class="lab">毕业学校：</span>
                  <span>{{ item.schoolName }}</span></p>
              </div>
            </div>
          </div>
          <div class="top-right">
            <div class="img" :style="{backgroundImage: 'url('+item.photo+')'}"></div>
          </div>
        </div>
        <div class="dp-bottom">
          <div class="dpb-block">
            <p>考点学校：{{ item.pointName }}</p>
            <p>考试日期：{{ formatDate(item.examDate) }}</p>
            <p>候考时间：{{ `${item.waitBeginTime} - ${item.waitEndTime}` }}</p>
          </div>
          <div class="dpb-block">
            <p>考场编号：{{ item.roomName }}</p>
            <p>座位号：{{ item.seatCode }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;批次：第{{ item.batch }}批</p>
            <p>考试时间：{{ `${item.examBeginTime} - ${item.examEndTime}` }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import kwPagination from '@/components/Pagination.vue'
import contSidebar from '@/components/navSidebar.vue'
import schoolListMixins from '../../common/mixins/schoolList.js'
// import { reject } from 'q'
export default {
  mixins: [schoolListMixins],
  name: 'adminssionTicket',
  components: {
    contSidebar,
    kwPagination
  },
  data () {
    return {
      filter: {
        name: null,
        schoolId: null,
        ticketCard: null
      },
      tableData: [],
      showIdex: null,
      previewTicketCardVisible: false,
      loading: false,
      listQuery: {
        page: 1,
        pageSize: 10,
        total: null,
        totalPages: null
      },
      ticketCardInfo: null,
      pointName: null,
      pointStudentNum: null,
      userList: [],
      downloading: false,
      activeItem: 0,
      destinationFileName: null
    }
  },
  created () {
    this.userData = JSON.parse(sessionStorage.getItem('userData'))
    this.getSchoolList().then(res => {
      this.activeItem = res.id
      this.$refs.contSideBar.setActiveId(this.activeItem)
      this.$set(this.filter, 'schoolId', res.id)
      this.getTicketCartList()
    })
  },
  methods: {
    // 搜索学生信息
    handleFilter () {
      this.listQuery.page = 1
      this.activeItem = this.filter.schoolId
      this.$refs.contSideBar.setActiveId(this.activeItem)
      this.getTicketCartList()
    },
    // 翻页
    changeCurrentPage (queryData) {
      this.listQuery.page = queryData.page
      this.listQuery.pageSize = queryData.pageSize
      this.getTicketCartList()
    },
    // 获取准考证列表
    getTicketCartList () {
      let that = this
      that.loading = true
      that.pointName = null
      that.pointStudentNum = null
      let qsData = {
        name: that.filter.name,
        page: that.listQuery.page,
        pageSize: that.listQuery.pageSize,
        schoolId: that.filter.schoolId,
        ticketCard: that.filter.ticketCard
      }
      that.$http.getTicketCartList(qsData).then(res => {
        if (res.code === 20000) {
          that.tableData = res.data.content
          that.listQuery.total = res.data.totalElements
          that.listQuery.totalPages = res.data.totalPages
          if (res.data.content.length) {
            that.pointName = res.data.content[0].pointName
            that.pointStudentNum = res.data.totalElements
          }
        } else {
          that.$message.error(res.msg)
        }
        that.loading = false
      })
    },
    // 查看准考证
    previewTicketCard (row) {
      this.ticketCardInfo = row
      this.previewTicketCardVisible = true
    },
    // 打印准考证
    printTicket () {
      let that = this
      const PAGE_SIZE = 8
      that.downloading = true
      that.$http.getTicketCartListBySchool({ schoolId: this.filter.schoolId }).then(res => {
        if (res.code === 20000) {
          let _len = res.data.length / PAGE_SIZE
          _len = parseInt(_len) === _len ? _len : parseInt(_len) + 1
          that.downloadPdf(0, _len, res.data, PAGE_SIZE)
        } else {
          that.$message.error(res.msg)
        }
      })
    },
    async downloadPdf (idx, len, schoolUserData, pageSize) {
      let that = this
      that.userList = schoolUserData.slice(idx * pageSize, (idx + 1) * pageSize)
      that.$nextTick(async () => {
        let htmlEml = document.querySelector(`#downloadPaper`)
        let res = await that.$http.covert2Pdf({ data: htmlEml.innerHTML, destinationFileName: that.destinationFileName })
        if (res.code === 20000) {
          that.destinationFileName = res.data.destinationFileName
          if (res.data && res.data.destinationUrl && idx === len - 1) {
            that.downloading = false
            window.open(res.data.destinationUrl)
          } else {
            that.downloadPdf(idx + 1, len, schoolUserData, pageSize)
          }
        }
      })
    },
    // 时间转换
    formatDate (date) {
      let dateArr = date.split('/')
      return `${dateArr[0]}年${dateArr[1]}月${dateArr[2]}日`
    },
    // 菜单回显
    handleAcitve (obj) {
      this.activeItem = obj.id
      this.$set(this.filter, 'schoolId', obj.id)
      this.getTicketCartList()
    }
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
  .table
    width 100%
    margin-top 25px
    text-align center
    td
      border 1px solid #e0e0e0
    thead
      tr
        background background
        td
          height 48px
          font-weight bold
          line-height 48px
          text-align center
    tbody
      tr
        &:hover
          background #f9faff
        td
          height 46px
          font-size 14px
          line-height 46px
          text-align center
          .ann
            color #ccc
          .photo
            color color
            text-decoration none
  .exam-info
    width 100%
    height 48px
    line-height 48px
    background #3d68d5
    position: relative;
    top: 20px;
    p
      span
        margin-left 20px
        color #fff
        font-size 14px
        font-weight bold
      a
        float right
        margin-right 40px
        color #fff
        font-size 14px
        text-decoration none
    a
      float left
      text-decoration none
  .show-video
    background #fff
    box-shadow: 0px 0px 1px #ccc;
    width 100px
    height 120px
    border-radius 5px
    z-index 9
    left -24px
    position absolute
    ul
      padding 8px 0
      margin 0
      li
        line-height 36px
        cursor pointer
        &:hover
          color color
  .card-container
    .card-title
      border 1px solid #333
      .info
        width 65%
        height 100%
        float left
        padding-top 30px
        p
          width 100%
          text-align center
          font-size 16px
          color #000
        h3
          text-align center
          color #000
          font-size 24px
          span
            margin 0 20px
        .info-content
          padding 10px 20px
          span
            color #000
            vertical-align top
            display inline-block
            margin-bottom 10px
            &:nth-child(1),&:nth-child(3)
              width 40%
            &:nth-child(2),&:nth-child(4)
              width 60%
      .photo
        border-left 1px solid #333
        padding 20px 0
        width 34%
        float left
        text-align center
        .img
          margin: 0 auto
          width: 150px
          height: 212px
          background-position: center
          background-size: cover
          background-repeat: no-repeat
    .card-content
      border 1px solid #333
      border-top 0px solid red
      padding 10px 20px
      >span
        color #000
        display inline-block
        &:nth-child(2n+1)
          width 50%
        &:nth-child(2n)
          width 50%
</style>
